<template>
  <div class="cartoonManage">
    <div style="text-align:left">
      <h2>全部漫画</h2>
    </div>
    <el-table
      :data="cartoonData"
      stripe
      style="width: 100%"
      height="70vh"
      >
      <el-table-column
        prop="cartoonName"
        label="漫画名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="description"
        label="简介"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="cartoonState"
        label="状态"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cartoonTag"
        label="标签">
      </el-table-column>
      <el-table-column
        prop="cartoonAuthor"
        label="作者"
        >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间">
      </el-table-column>
    </el-table>
    <div style="height:50px"></div>
    <el-button type="primary" @click="download_cartoon">下载/更新漫画</el-button>
    <div style="height:30px"></div>
    <el-button type="primary" @click="setRecommendCartoon(1)">设置主页轮播图展示漫画</el-button>
    <el-button type="primary" @click="setRecommendCartoon(2)">设置主页今日推荐漫画</el-button>
    <el-button type="primary" @click="setRecommendCartoon(3)">设置本周热推漫画</el-button>
    <el-button type="primary" @click="setRecommendCartoon(4)">设置最新上架漫画</el-button>
    <el-dialog
      :title="title_tip"
      :visible.sync="dialogVisible"
      width="40%"
      >
      <div style="height: 400px" class="dialog_content">
        <div class="allmanhua">
          <div style="font-weight:700;font-size:17px;margin-bottom:5px">所有漫画资源</div>
          <div class="scroll_list">
            <div class="allmanhuaitem" v-for="i in allmanhua" :key="i.id" @click="select_manhua(i.cartoonName)">{{i.cartoonName}}</div>
          </div>
        </div>
        <div class="divid">
        </div>
        <div class="addmanhua">
          <div style="font-weight:700;font-size:17px;margin-bottom:5px">要添加的漫画资源</div>
          <div class="scroll_list">
            <div class="addmanhuaitem" v-for="(i, index) in selectmanhualist" :key="i">
              <div>{{i}}</div>
              <div class="clear" @click="clearmanhua(index)">X</div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRecommend">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { setCartoon } from '@/api/user'
import {AllLocalCartoon, SetRecommendCartoon, GetLocalCartoon, GetRecommendCartoon} from '@/api/manhua'
export default {
  data() {
    return {
      cartoonData: [],
      dialogVisible: false,
      title_tip: '',
      recommendType: '',
      selectmanhualist: [],
      allmanhua: []
    }
  },
  methods: {
    async download_cartoon() {
      let data = await setCartoon()
      console.log("开始下载",data)
    },
    async setRecommend() {
      await SetRecommendCartoon({
        cartoonName: this.selectmanhualist,
        recommendType: this.recommendType
      })
      this.$message.success('设置成功')
      this.dialogVisible = false
    },
    async setRecommendCartoon(val) {
      let resdata = await GetLocalCartoon()
      this.allmanhua = resdata.cartoon_list
      this.dialogVisible = true
      this.selectmanhualist = []
      if(val == 1) {
        this.title_tip = '修改轮播图漫画'
        this.recommendType = 'swiper'
        let res_data = await GetRecommendCartoon({
          recommendType: 'swiper',
        })
        res_data.cartoonData.forEach(val => {
          this.selectmanhualist.push(val.cartoonName)
        });
      }
      if(val == 2) {
        this.title_tip = '修改今日推荐漫画'
        this.recommendType = '今日推荐'
        let res_data = await GetRecommendCartoon({
          recommendType: '今日推荐',
        })
        res_data.cartoonData.forEach(val => {
          this.selectmanhualist.push(val.cartoonName)
        });
      }
      if(val == 3) {
        this.title_tip = '修改本周热推漫画'
        this.recommendType = '本周热推'
        let res_data = await GetRecommendCartoon({
          recommendType: '本周热推',
        })
        res_data.cartoonData.forEach(val => {
          this.selectmanhualist.push(val.cartoonName)
        });
      }
      if(val == 4) {
        this.title_tip = '修改最新上架漫画'
        this.recommendType = '最新上架'
        let res_data = await GetRecommendCartoon({
          recommendType: '最新上架',
        })
        res_data.cartoonData.forEach(val => {
          this.selectmanhualist.push(val.cartoonName)
        });
      }
    },
    select_manhua(val) {
      if(this.selectmanhualist.indexOf(val) == -1){
        this.selectmanhualist.push(val)
      }else{
        this.$message.warning('你已添加过' + val)
      }
    },
    clearmanhua(val) {
      this.selectmanhualist.splice(val, 1)
    },
  },
  async mounted() {
    let manhua_data = await AllLocalCartoon()
    this.cartoonData = manhua_data.manhua_list
  },
}
</script>

<style>
.cartoonManage{
  padding: 10px 0 0 50px;
}
.dialog_content{
  display: flex;
  justify-content: space-between;
}
.allmanhua{
  flex: 1;
}
.allmanhuaitem{
  padding: 10px 5px 10px 10px;
  text-align: left;
  cursor: pointer;
}
.allmanhuaitem:hover{
  background-color: #C0C4CC;
}
.scroll_list{
  overflow-y: scroll;
  height: 100%;
}
.scroll_list::-webkit-scrollbar {
    width: 4px;
}
.scroll_list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.scroll_list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);

}

.addmanhuaitem{
  padding: 10px 15px 10px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.clear{
  width: 20px;
  height: 20px;
  padding-top: 1px;
  border-radius: 25px;
}
.clear:hover{
  background-color: #C0C4CC;
}
.addmanhua{
  flex: 1;
  /* background-color: blue; */
}
.divid{
  height:100%;
  /* background-color:#C0C4CC; */
  width:1px;
  margin:0 5px 0 5px;
}
</style>